<template>
  <div class="container wallet">
    <div class="wallet-info">
      <div class="wallet-amount">{{userInfo.user_money}}</div>
      <div class="wallet-unit">余额（元）</div>
      <div class="wallet-controller">
        <i-button type="primary" size="small" @click="$router.push({ path: '/pages/rechargeType/rechargeType',query: {from_type: 1}})"
          i-class="wallet-recharge" shape="circle">充值</i-button>
        <i-button type="default" size="small" @click="backUser" i-class="wallet-recharge" shape="circle">返回</i-button>
      </div>
    </div>
    <div class="detail-list">
      <div class="detail-list-title">收支明细</div>
      <div class="detail-list-body">
        <div class="wallet-list" v-if="balanceList">
          <wallet-item v-for="(item ,index) in balanceList" :key="index" :data="item"></wallet-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  import walletItem from "@/pages/wallet/walletItem";
  import request from "@/api/request";
  export default {
    components: {
      walletItem
    },
    data() {
      return {
        page: 1,
        balanceList: null,
        isLoadEnd: false

      };
    },
    computed: {
      ...mapState(['userInfo'])
    },
    methods: {
      ...mapMutations(["setBalanceList"]),
      backUser() {
        this.$router.replace({
          path: '/pages/index/index'
        })
      },
      getPoints() {
        request
          .getPoints({
            page: this.page,
            type: 2
          })
          .then(res => {
            if (res.data.length < 20) {
              this.isLoadEnd = true
            }
            if (this.balanceList) {
              this.balanceList = this.balanceList.concat(res.data)
            } else {
              this.balanceList = res.data
            }
            // this.setBalanceList(res.data);
          });
      },

    },
    onReachBottom() {
      this.page++;
      this.getPoints();
    },
    mounted() {
      this.balanceList = null
      this.getPoints();
    }
  };

</script>

<style lang="less">
  .wallet-info {
    padding: 30px 0;

    .wallet-amount {
      font-size: 44px;
      font-weight: bold;
      color: rgba(238, 117, 89, 1);
      line-height: 1em;
      margin-top: 20px;
      text-align: center;
    }

    .wallet-unit {
      text-align: center;
      font-size: 15px;
      line-height: 1em;
      margin-top: 20px;
      color: rgba(128, 128, 128, 1);
    }

    .wallet-controller {
      text-align: center;
      margin-top: 36px;
    }

    .wallet-recharge {
      width: 180px;
      display: inline-block;
    }
  }

  .detail-list {
    background: #fff;

    .detail-list-title {
      padding: 15px;
      font-size: 15px;
      line-height: 1em;
      font-weight: 500;
      color: rgba(64, 64, 64, 1);
    }

    .detail-list-body {}

    .wallet-list {}

  }

</style>
